<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title># identity - Creative vCard / Personal portfolio</title>

<!-- CSS files begin-->
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="all"/>

<!-- JavaScript files begin-->
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Yanone_Kaffeesatz_400-700.font.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.ufvalidator-1.0.5.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.js"></script>
<script type="text/javascript" src="js/jquery.progression.1.3.js"></script>
<script type="text/javascript" src="js/jquery.text-effects.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>

<body>
    <!-- wrappage begin here -->
    <div id="wrappage">
        <!-- container begin here -->
        <div class="container">
            <!-- top block begin here -->
            <div class="top">
                <div class="energy">
                </div>
                <div class="top-block">
                    <a href="index.html" class="logo">
                        # identity
                    </a>
                    <div class="bg-e-button">
                    </div>
                    <div class="bg-button">
                    </div>
                    <a href="" class="open">
                        <img src="images/flash.png" alt="" />
                    </a>
                </div>
            </div>
            <!-- top block end here -->
            <!-- center block begin here -->
            <div class="center-block">
                <!-- scanner begin here -->
                <div class="scanner clearfix">
                    <div class="scanner-block">
                        <div class="scanner-box left">
                            <div class="scanner-line">
                            </div>
                        </div>
                        <ul class="data left">
                            <li class="search"># wait... identity...</li>
                            <li class="search-d">
                                # / > webdeveloper
                            </li>
                            <li class="search-d">
                                # / > john doe
                            </li>
                            <li class="search-d">
                                # / > access received...
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- scanner end here -->
                <!-- main begin here -->
                <div class="main">
                    <div class="load">
                    </div>
                    <div class="shut-left">
                    </div>
                    <div class="shut-right">
                    </div>
                    <div class="page">
                        <!-- foto / social block begin here -->
                        <div class="box-left left">
                            <div class="info">
                                <ul class="socicon left">
                                    <li>
                                        <a href="#">
                                            <img src="images/facebook.png" alt="" />
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="images/twitter.png" alt="" />
                                        </a>
                                    </li>
                                    <li class="last">
                                        <a href="#">
                                            <img src="images/dribbble.png" alt="" />
                                        </a>
                                    </li>
                                </ul>
                                <img src="images/johndoe.png" alt="" class="right" />
                                <ul class="left who">
                                    <li>
                                        # John Doe
                                    </li>
                                    <li>
                                        # Webdeveloper
                                    </li>
                                </ul>
                            </div>
                            <!-- foto / social block end here -->
                            <!-- menu begin here -->
                            <ul id="menu" class="right">
                                <li>
                                    <a href="#about" class="selected">
                                        about
                                    </a>
                                </li>
                                <li>
                                    <a href="#resume" class="skill-start">
                                        resume
                                    </a>
                                </li>
                                <li>
                                    <a href="#portfolio">
                                        portfolio
                                    </a>
                                </li>
                                <li class="last">
                                    <a href="#contact">
                                        contact
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!-- menu end here -->
                        <!-- page block begin here -->
                        <div class="cont left">
                            <!-- page about begin here -->
                            <div id="about" class="box left">
                                <div class="box-content">
                                    <h3>
                                        # About Me
                                    </h3>
                                    <p class="sub">
                                        Lorem ipsum dolor sit amet
                                    </p>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
                                        veritatis et quasi architecto beatae vitae
                                        <a href="#">
                                            dicta sunt
                                        </a>
                                        explicabo.
                                    </p>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
                                        veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
                                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                                        consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
                                    </p>
                                    <h3>
                                        # Experience
                                    </h3>
                                    <p class="sub">
                                        Lorem ipsum dolor sit amet
                                    </p>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
                                        veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                                    </p>
                                    <ul class="experience">
                                        <li>
                                            <span>
                                                <a href="#">
                                                    New Creative Corp.
                                                </a>
                                            </span>
                                            / Senior Developer 2010 - Present
                                        </li>
                                        <li>
                                            <span>
                                                <a href="#">
                                                    Crazy Games Corp.
                                                </a>
                                            </span>
                                            / Front-End Developer 2007 - 2010
                                        </li>
                                        <li>
                                            <span>
                                                <a href="#">
                                                    Cool Studio Inc.
                                                </a>
                                            </span>
                                            / Back-End Developer 2005 - 2007
                                        </li>
                                    </ul>
                                    <h3>
                                        # New projects
                                    </h3>
                                    <p class="sub">
                                        Lorem ipsum dolor sit amet
                                    </p>
                                    <!-- gallery begin here -->
                                    <div class="gallery-block">
                                        <div class="gallery left">
                                            <div class="img">
                                                <img src="images/image-ex.jpg" alt="" />
                                            </div>
                                            <div class="des">
                                                description
                                            </div>
                                            <div class="block-zoom">
                                                <a href="images/big-image-ex.jpg" rel="prettyPhoto" title="Images" class="zoom">
                                                </a>
                                                <a href="#" title="Link" class="link">
                                                </a>
                                            </div>
                                        </div>
                                        <div class="gallery left last">
                                            <div class="img">
                                                <img src="images/image-ex.jpg" alt="" />
                                            </div>
                                            <div class="des">
                                                description
                                            </div>
                                            <div class="block-zoom">
                                                <a href="images/big-image-ex.jpg" rel="prettyPhoto" title="Images" class="zoom">
                                                </a>
                                                <a href="#" title="Link" class="link">
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- gallery end here -->
                                </div>
                            </div>
                            <!-- page about end here -->
                            <!-- page resume begin here -->
                            <div id="resume" class="box left">
                                <div class="box-content">
                                    <h3>
                                        # Skills
                                    </h3>
                                    <p class="sub">
                                        Lorem ipsum dolor sit amet
                                    </p>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
                                        veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                                    </p>
                                    <div class="skills">
                                        <div class="bar">
                                            <div class="block-pr">
                                                <div class="progressbar pr1">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="last">
                                            HTML &amp; CSS
                                        </div>
                                        <div class="bar">
                                            <div class="block-pr">
                                                <div class="progressbar pr2">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="last">
                                            jQuery
                                        </div>
                                        <div class="bar">
                                            <div class="block-pr">
                                                <div class="progressbar pr3">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="last">
                                            JavaScript
                                        </div>
                                        <div class="bar bar-b">
                                            <div class="block-pr">
                                                <div class="progressbar pr4">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="last">
                                            PHP &amp; MySql
                                        </div>
                                    </div>
                                    <ul class="stars">
                                        <li>
                                            Lorem ipsum
                                            <a href="#">
                                                dolor sit amet
                                            </a>
                                            , consectetuer adipiscing elit.
                                        </li>
                                        <li>
                                            Lorem ipsum dolor sit amet,
                                            <a href="#">
                                                consectetuer
                                            </a>
                                            adipiscing elit.
                                        </li>
                                        <li>
                                            Lorem
                                            <a href="#">
                                                ipsum dolor
                                            </a>
                                            sit amet, consectetuer adipiscing elit.
                                        </li>
                                    </ul>
                                    <h3>
                                        # Education
                                    </h3>
                                    <p class="sub">
                                        Lorem ipsum dolor sit amet
                                    </p>
                                    <ul class="education">
                                        <li>
                                            <span>
                                                Harvard University
                                            </span>
                                            / Web Front-End Development
                                        </li>
                                        <li>
                                            <span>
                                                University of Chicago
                                            </span>
                                            / Web Front-End Development
                                        </li>
                                    </ul>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
                                        veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
                                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                                        consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
                                    </p>
                                </div>
                            </div>
                            <!-- page resume end here -->
                            <!-- page portfolio begin here -->
                            <div id="portfolio" class="box left">
                                <div class="box-content">
                                    <h3>
                                        # Portfolio
                                    </h3>
                                    <p class="sub">
                                        Lorem ipsum dolor sit amet
                                    </p>
                                    <!-- gallery begin here -->
                                    <div class="gallery-block">
                                        <div class="gallery left">
                                            <div class="img">
                                                <img src="images/image-ex.jpg" alt="" />
                                            </div>
                                            <div class="des">
                                                description
                                            </div>
                                            <div class="block-zoom">
                                                <a href="images/big-image-ex.jpg" rel="prettyPhoto" title="Images" class="zoom">
                                                </a>
                                                <a href="#" title="Link" class="link">
                                                </a>
                                            </div>
                                        </div>
                                        <div class="gallery left last">
                                            <div class="img">
                                                <img src="images/image-ex.jpg" alt="" />
                                            </div>
                                            <div class="des">
                                                description
                                            </div>
                                            <div class="block-zoom">
                                                <a href="images/big-image-ex.jpg" rel="prettyPhoto" title="Images" class="zoom">
                                                </a>
                                                <a href="#" title="Link" class="link">
                                                </a>
                                            </div>
                                        </div>
                                        <div class="gallery left">
                                            <div class="img">
                                                <img src="images/image-ex.jpg" alt="" />
                                            </div>
                                            <div class="des">
                                                description
                                            </div>
                                            <div class="block-zoom">
                                                <a href="images/big-image-ex.jpg" rel="prettyPhoto" title="Images" class="zoom">
                                                </a>
                                                <a href="#" title="Link" class="link">
                                                </a>
                                            </div>
                                        </div>
                                        <div class="gallery left last">
                                            <div class="img">
                                                <img src="images/image-ex.jpg" alt="" />
                                            </div>
                                            <div class="des">
                                                description
                                            </div>
                                            <div class="block-zoom">
                                                <a href="images/big-image-ex.jpg" rel="prettyPhoto" title="Images" class="zoom">
                                                </a>
                                                <a href="#" title="Link" class="link">
                                                </a>
                                            </div>
                                        </div>
                                        <div class="gallery left">
                                            <div class="img">
                                                <img src="images/image-ex.jpg" alt="" />
                                            </div>
                                            <div class="des">
                                                description
                                            </div>
                                            <div class="block-zoom">
                                                <a href="images/big-image-ex.jpg" rel="prettyPhoto" title="Images" class="zoom">
                                                </a>
                                                <a href="#" title="Link" class="link">
                                                </a>
                                            </div>
                                        </div>
                                        <div class="gallery left last">
                                            <div class="img">
                                                <img src="images/image-ex.jpg" alt="" />
                                            </div>
                                            <div class="des">
                                                description
                                            </div>
                                            <div class="block-zoom">
                                                <a href="images/big-image-ex.jpg" rel="prettyPhoto" title="Images" class="zoom">
                                                </a>
                                                <a href="#" title="Link" class="link">
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- gallery end here -->
                                </div>
                            </div>
                            <!-- page portfolio end here -->
                            <!-- page contact begin here -->
                            <div id="contact" class="box left">
                                <div class="box-content-c left">
                                    <div class="cont-block left">
                                        <h3>
                                            # Contact
                                        </h3>
                                        <p class="sub">
                                            Lorem ipsum dolor sit amet
                                        </p>
                                        <p>
                                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                                            doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
                                            veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                                        </p>
                                        <ul class="contact">
                                            <li>
                                                John Doe
                                            </li>
                                            <li>
                                                Chicago, IL, 111 Webdev St
                                            </li>
                                            <li>
                                                Phone: 111-11-11
                                            </li>
                                            <li>
                                                Site: www.dev.com
                                            </li>
                                            <li>
                                                Email: web@dev.com
                                            </li>
                                            <li>
                                                Download
                                                <a href="#">
                                                    vCard
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="cont-block left last">
                                        <div class="contactusb">
                                            <form action="#" id="contactus" method="post">
                                                <div>
                                                    <label for="name">
                                                        Name
                                                    </label>
                                                    <input type="text" name="name" class="textfield req-string" id="name" value="" />
                                                    <label for="email">
                                                        E-mail
                                                    </label>
                                                    <input type="text" name="email" class="textfield req-email" id="email" value="" />
                                                    <label for="message">
                                                        Message
                                                    </label>
                                                    <textarea name="message" id="message" class="textarea req-string" cols="8" rows="12"></textarea>
                                                    <button id="send" type="submit">
                                                        send message
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                        <span class="sending">
                                            send...
                                        </span>
                                        <div class="mess center">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- page contact end here -->
                        </div>
                        <!-- page block end here -->
                    </div>
                </div>
                <!-- main end here -->
            </div>
            <!-- center block end here -->
            <!-- bottom block begin here -->
            <div class="bottom">
                <div class="bottom-block">
                    <h1 class="left">
                        Personal vCard
                    </h1>
                    <h5 class="right">
                        Copyright 2011, All Rights Reserved by John Doe
                    </h5>
                </div>
            </div>
            <!-- bottom block end here -->
        </div>
        <!-- container end here -->
    </div>
    <!-- wrappage end here -->
</body>
</html>